<template>
    <div>
      <div>
        <Header></Header>
      </div>
      <div class="main-body">
        <div class="main-content">
          <div class="main-title">
            <div>
              <Crumbs></Crumbs>
            </div>
          </div>
          <div class="personal-box">
            <div class="left nav">
              <div class="nav-info">
                <div class="nav-portrait">
                  <img :src="perInfo.headimg">
                </div>
                <div class="nav-name">
                  {{ perInfo.nickname }}
                </div>
                <div class="level">
                  Lv.6
                </div>
              </div>
              <div class="navbar">
                <ul>
                  <li>
                    <a @click="toMyPath('/Personal/PersonalInfo')" :class="current === 1?'active' : ''" href="javascript: void(0)">
                    基本信息
                    </a>
                  </li>
                  <li>
                    <a @click="toMyPath('/Personal/PersonalSystemNews')" :class="current === 2?'active' : ''" href="javascript: void(0)">
                    系统消息
                    </a>
                  </li>
                  <li>
                    <a @click="toMyPath('/Personal/PersonalMyComment')" :class="current === 3?'active' : ''" href="javascript: void(0)">
                    我发布的车评
                    </a>
                  </li>
                  <li>
                    <a @click="toMyPath('/Personal/PersonalPost')" :class="current === 4?'active' : ''" href="javascript: void(0)">
                      我发布的帖子
                    </a>
                  </li>
                  <li>
                    <a @click="toMyPath('/Personal/PersonalComplaints')" :class="current === 5?'active' : ''" href="javascript: void(0)">
                    服务投诉
                    </a>
                  </li>
                  <li>
                    <a @click="toMyPath('/Personal/PersonalOpinion')" :class="current === 6?'active' : ''" href="javascript: void(0)">
                    平台意见
                    </a>
                  </li>
                  <li>
                    <a @click="toMyPath('/Personal/PersonalCllection')" :class="current === 7?'active' : ''" href="javascript: void(0)">
                    我的收藏
                    </a>
                  </li>
                  <li>
                    <a @click="toMyPath('/Personal/PersonalChangePass')" :class="current === 8?'active' : ''" href="javascript: void(0)">
                    修改密码
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class=" right personal">
              <router-view @changeHeadimg="headimg" @getAgin="myInfo" :perInfo="info" :hasLabel="hasLabel" @changeCurrent="currentPage">
              </router-view>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
      <div>
        <Footer></Footer>
      </div>
    </div>
</template>

<script>
  import Header from './Header'
  import Footer from './Footer'
  import Crumbs from './Crumbs'
  import 'iview/dist/styles/iview.css'
  export default {
    name: 'personal',
    components: {
      'Header': Header,
      'Footer': Footer,
      'Crumbs': Crumbs
    },
    data () {
      return {
        current: 1,
        perInfo: {},
        vip: 6,
        noLable: false
      }
    },
    computed: {
      info: function () {
        return this.perInfo
      },
      hasLabel: function () {
        if (this.noLable) {
          return 0
        } else {
          return 1
        }
      }
    },
    methods: {
      toMyPath: function (path) {
        this.$router.push(path)
      },
      currentPage: function (num) {
        this.current = num
      },
      myInfo: function () {
        let that = this
        that.$chaos.ajax({
          url: '/User/getUserData',
          userinfo: true,
          callback: function (type, res) {
            if (type === 'success') {
              that.perInfo = res.result.list
              if (res.result.list.label.length === 0) {
                that.noLable = true
              } else {
                that.noLable = false
              }
            }
          }
        })
      },
      headimg: function (e) {
        this.perInfo.headimg = e
      }
    },
    created () {
      let that = this
      this.myInfo()
      if (decodeURI(that.$chaos.getQueryString('froml'))) {
        this.$emit('discoverConcat')
      }
    },
    activated () {
      let that = this
      this.myInfo()
      if (decodeURI(that.$chaos.getQueryString('froml'))) {
        this.$emit('discoverConcat')
      }
    }
  }
</script>

<style scoped>
  .main-body{
    background: url("../../static/image/cp_6.png");
  }
</style>
